<template>
  <div class="layout">
    <div class="wrapper">
      <div class="nav"></div>
      <div class="left-side">
        <div class="card">
          <div class="article-author"></div>
          <div class="article-content" ref="contentRef"></div>
        </div>
        <xz-comment></xz-comment>
      </div>
      <div class="right-side">
        <div class="author-card">
          <div class="card-info-bg"></div>
          <div class="card-info-avatar">
            <div class="avatar-img">
              <img
                class="fit-cover"
                src="https://img.hoshinagi.top/blog/avatar.avif"
                alt=""
              />
            </div>
          </div>
          <div class="card-info-desc">
            <div class="author-info-name">程序员星凪</div>
            <div class="author-info-data is-center">
              <a>
                <div class="data-count">2</div>
                <div class="data-text">投稿</div>
              </a>
              <a>
                <div class="data-count">0</div>
                <div class="data-text">获赞</div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { marked } from "marked";
import request from "@/utils/request";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const contentRef = ref();

onMounted(async () => {
  const id = +route.query.id!;
  const data = await request.get(`http://localhost:5173/md/lol_${id}.md`);
  let md = await marked.parse(data.data);
  let jsonPattern =
    /<pre><code class="language-json">([\s\S]*?)<\/code><\/pre>/;
  const matchResult = md.match(jsonPattern);
  if (matchResult) {
    matchResult[1] = matchResult[1].replace(/&quot;/g, '"');
  }
  md = md.replace(jsonPattern, "");
  contentRef.value.innerHTML = md;
});
</script>

<style scoped lang="scss">
.wrapper {
  width: 1283px !important;
  margin: 0 auto;
  position: relative;
  display: flex;
  padding: 1rem;

  .nav {
    margin-bottom: 1rem;
  }

  .left-side {
    width: calc(100% - 300px);
  }

  .right-side {
    width: 300px;
    margin-left: 1rem;
    background-color: var(--xz-card-bg);
  }
}

.right-side {
  height: fit-content;
  position: sticky;
  top: calc(80px + 1rem);

  .author-card {
    width: 100%;
    position: relative;
    padding-bottom: 1rem;

    .card-info-bg {
      min-height: 100px;
      background-size: 400%;
      background: var(--xz-theme);
    }

    .card-info-avatar {
      background-color: var(--xz-card-bg);
      width: 114px;
      height: 114px;
      right: calc(50% - 57px);
      top: 35px;
      border-top-left-radius: 500px;
      border-top-right-radius: 500px;
      border-bottom-right-radius: 500px;
      border-bottom-left-radius: 500px;
      position: absolute;
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.69, 0.39, 0, 1.21);
      transition-delay: 0s;
      transition-property: all;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .avatar-img {
        overflow-x: hidden;
        overflow-y: hidden;
        border-top-left-radius: 500px;
        border-top-right-radius: 500px;
        border-bottom-right-radius: 500px;
        border-bottom-left-radius: 500px;
        width: 100px;
        cursor: pointer;
        height: 100px;

        img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          transition: 0.3s;
        }
      }
    }

    .card-info-desc {
      display: flex;
      align-items: center;
      flex-direction: column;

      .author-info-name {
        margin-top: 60px;
        text-align: center;
        font-weight: 700;
        color: var(--xz-fontcolor);
        font-size: 20px;
        line-height: 1;
        margin-bottom: 5px;
      }

      .author-info-data {
        display: table;
        width: 100%;
        table-layout: fixed;
        margin-top: 12px;
        margin-right: 0px;
        margin-bottom: 4px;
        padding-top: 0px;
        padding-right: 20px;

        a {
          position: relative;
          display: table-cell;

          .data-count {
            margin-top: -0.32em;
            color: var(--xz-fontcolor);
            font-size: 1.4em;
            line-height: 1.5;
          }

          .data-text {
            color: var(--xz-fontcolor);
            font-size: 1em;
            line-height: 1.5;
          }
        }

        a:not(:last-child)::after {
          opacity: 0.3;
          position: absolute;
          top: 6px;
          right: 0px;
          content: "";
          width: 1px;
          background: black;
          height: 40px;
        }
      }
    }
  }
}

.card {
  padding: 20px;
  background: var(--xz-card-bg);
}
</style>
